<template>
	<view class="page">
		<view class="title">e陪驾&爱学车</view>
		<view class="describe flex">
			<view class="describe-tips">陪驾端 / 验车端</view>
			<view class="describe-nr">欢迎您的登录</view>
		</view>
		<view class="item flex" style="margin-top: 190rpx;">
			<view>+86</view>
			<input type="number" placeholder="请输入手机号" maxlength="11" v-model="mobile" style="padding-left: 30rpx;" />
		</view>
		<view class="item flex" style="margin-top: 80rpx;">
			<input type="number" placeholder="请输入验证码" v-model="code" />
			<view  @click="getCode">{{tips}}</view>
		</view>
		<view class="btn" @click="login">确认登录</view>
		<tn-verification-code :seconds="seconds" ref="verificationCode"
			@change="codeChange"></tn-verification-code>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mobile: '',
				code: '',
				tips: '',
				seconds: 60,
			};
		},
		onLoad() {
			
		},
		methods: {
			login() {
				let sendData = {
					mobile: this.mobile,
					sms_code:this.code
				}
				this.apifun.unirequest('/partner/user/login','post',sendData,(res)=>{
					if(res.code === 200){
						let datas = res.data;
						uni.setStorageSync('token',datas.token);
						if(datas.is_scope == 1){
							this.apifun.navigate('/pages/start/fenglogo')
						}else{
							setTimeout(()=>{
								uni.reLaunch({
									url:'/pages/tabbar/orderTaking'
								})
							})
						}
					}else{
						this.apifun.toast(res.msg)
					}
				},false,true)
			},
			codeChange(text) {
				this.tips = text
			},
			getCode() {
				const regex = /^1[3456789]\d{9}$/
				if(regex.test(this.mobile)) {
					if (this.$refs.verificationCode.canGetCode) {
						// 通知验证码组件内部开始倒计时
						this.$refs.verificationCode.start()
						this.getCodes()
					} else {
						this.apifun.toast('倒计时结束后再发送')
					}
				}else {
					this.apifun.toast('请输入正确手机号')
				}
			},
			getCodes() {
				this.apifun.unirequest(this.apifun.login_send_code,'post',{mobile:this.mobile,type:1},(res)=>{
					if(res.code === 200){
						let datas = res.data;
						this.apifun.toast('发送成功')
					}else{
						this.apifun.toast(res.msg)
					}
				},true,true)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		width: 100%;
		height: 100vh;
		background-image: url('@/static/img/bg.png');
		background-size: cover;
		background-repeat: no-repeat;
		padding: 0 76rpx;
		box-sizing: border-box;
	}
	.title {
		padding-top: 300rpx;
		font-size: 72rpx;
		font-weight: bold;
	}
	.describe {
		margin-top: 14rpx;
		.describe-tips {
			padding: 0 20rpx;
			height: 40rpx;
			line-height: 40rpx;
			text-align: center;
			border-radius: 8rpx;
			background: #0E71EB;
			font-size: 28rpx;
			color: #FFFFFF;
		}
		.describe-nr {
			margin-left: 16rpx;
			font-size: 36rpx;
			color: #2A2A2A;
		}
	}
	.item {
		width: 550rpx;
		padding-bottom: 20rpx;
		box-sizing: border-box;
		border-bottom: 2rpx solid #EBEBEB;
	}
	.btn {
		margin-top: 224rpx;
		width: 550rpx;
	}
</style>
